<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <p><label for="send">输入框</label> <input type="text" id="send" onkeydown="sending()"></p>
    <div id="chatArea"></div>
    <script>
        ws = new WebSocket('ws://localhost:8080')
        ws.onopen = function () {
            console.log("connected!")
        }
        ws.onmessage = function (msg) {
            let newMsg = document.createElement('div')
            console.log(msg)
            newMsg.innerHTML = msg.data
            document.getElementById('chatArea').appendChild(newMsg)
            
        }
        function sending() {
            if (event.keyCode === 13 && event.target.value)
                ws.send(event.target.value)
        }
    </script>
</body>

</html>